<template>
  <view class="bg-white">
    <AtSearchBar v-model:value="searchKey" @action-click="onClickSearch" />
    <AtTabs
      :current="isActiveTabIndex"
      scroll
      :tabList="tabs"
      @click="switchTab"
    >
      <AtTabsPane :current="isActiveTabIndex" :index="0">
        <view
          class="flex justify-between text-xs text-gray"
          style="padding: 14px"
        >
          <view>渠道等级<text class="cuIcon-triangledownfill"></text></view>
          <view class="flex"
            >关联CASE数量
            <!-- <view class="flex flex-direction">
              <text class="cuIcon-triangleupfill"></text>
              <text class="cuIcon-triangledownfill"></text>
            </view> -->
          </view>
          <view>CASE有新提醒</view>
          <view
            style="float: left; width: 1px; height: 18px"
            class="bg-gray"
          ></view>
          <view @tap="switchFilterPane"
            >筛选<text class="cuIcon-triangledownfill"></text
          ></view>
        </view>
        <view class="flex flex-direction">
          <view v-for="channel in channelList" :key="channel.id">
            <ChannelCard :channel="channel" />
          </view>
        </view>
      </AtTabsPane>
      <AtTabsPane :current="isActiveTabIndex" :index="1">
        <view style="font-size: 18px; text-align: center; height: 100px"
          >标签页二的内容</view
        >
      </AtTabsPane>
      <AtTabsPane :current="isActiveTabIndex" :index="2">
        <view style="font-size: 18px; text-align: center; height: 100px"
          >标签页三的内容</view
        >
      </AtTabsPane>
      <AtTabsPane :current="isActiveTabIndex" :index="3">
        <view style="font-size: 18px; text-align: center; height: 100px"
          >标签页四的内容</view
        >
      </AtTabsPane>
      <AtTabsPane :current="isActiveTabIndex" :index="4">
        <view style="font-size: 18px; text-align: center; height: 100px"
          >标签页五的内容</view
        >
      </AtTabsPane>
      <AtTabsPane :current="isActiveTabIndex" :index="5">
        <view style="font-size: 18px; text-align: center; height: 100px"
          >标签页六的内容</view
        >
      </AtTabsPane>
    </AtTabs>
    <view>
      <BottomButton />
    </view>
  </view>
  <!-- 筛选右侧抽屉 -->
  <AtDrawer :show="isShowFilter" right mask @close="switchFilterPane">
    <view class="drawer-item">优先展示items里的数据</view>
    <view class="drawer-item">如果items没有数据就会展示children</view>
    <view class="drawer-item"
      >这是自定义内容 <AtIcon value="home" size="20"
    /></view>
    <view class="drawer-item">这是自定义内容</view>
  </AtDrawer>
</template>
<script lang="ts">
import './index.scss'
import { defineComponent, reactive, ref, watch } from 'vue'
import { AtSearchBar, AtTabs, AtTabsPane, AtDrawer, AtIcon } from 'taro-ui-vue3/lib'
import Taro from '@tarojs/taro'
import ChannelCard from './ChannelCard.vue'
import { Channel } from '@/models/types.ts'
import BottomButton from '@/components/BottomButton.vue'

export default defineComponent({
  components: {
    AtSearchBar,
    AtTabs,
    AtTabsPane,
    AtDrawer,
    AtIcon,
    ChannelCard,
    BottomButton,
  },
  setup() {
    const searchKey = ref('')
    const isActiveTabIndex = ref(0)
    const isShowFilter = ref(false)

    const channelList = reactive([
      {
        id: 1,
        level: 2,
        title: '招商银行北京连锁分公司',
        address: '北京市海淀区东北旺西路10号',
        visitNum: 3,
        caseNum: 10,
      },
      {
        id: 2,
        level: 3,
        title: '交通银行北京连锁分公司',
        address: '北京市朝阳区东北旺西路10号',
        visitNum: 10,
        caseNum: 50,
      },
    ] as Channel[])

    const tabs = reactive([
      { title: '全部' },
      { title: '内部资源' },
      { title: '组织' },
      { title: '关联方' },
      { title: '分供商' },
      { title: '合作方' },
    ])

    watch(searchKey, ([newSearchKey, oldSearchKey]) => {
      console.log(newSearchKey)
      console.log(oldSearchKey)
    })

    const onClickSearch = () => {
      Taro.showToast({
        title: '搜索' + searchKey.value,
        duration: 1000,
      })
    }

    const switchTab = (index: number) => {
      if (isActiveTabIndex.value === index) {
        return
      }
      isActiveTabIndex.value = index
    }

    const switchFilterPane = () => {
      console.log("xxx")
      isShowFilter.value = !isShowFilter.value
    }

    return {
      tabs,
      searchKey,
      onClickSearch,
      isActiveTabIndex,
      switchTab,
      channelList,
      isShowFilter,
      switchFilterPane,
    }
  },
})
</script>
